<template>
<div>
    <div class="title" v-for="item in arr" :key="item.id">
        <slot :row="item" />
        <div @click="fn">{{ fld ? "收起" : "打开"}}</div>
    </div>
     <div :class="`a ${fld ? '' : 'b'}`">
         <slot name="b"/>
    </div>
</div>
           
</template>

<script>
export default ({
    data () {
        return {
            fld:true,
            
        }
       
    },
     props:{
            arr:Array
        },
    methods: {
        fn ( ) {
            this.fld = !this.fld
        }
    }
})
</script>

<style scoped>
    .title {
        width: 200px;
        border-bottom: 1px solid red;
         justify-content: space-between;
          display: flex;
    }
    .a{
        height: 200px;
        overflow: hidden;
        transition: height 500ms ease;
    }
    .b {
        height: 0;
    }
</style>